<%@ taglib prefix="s" uri="/struts-tags" %>
<script>
$(function() {

	var destinoDropText = "#recursosAsignados ol";
	var destinoDrop = $(destinoDropText);
	var destinoSelectText = "#resultado";
	var destinoSelect = $(destinoSelectText);
	var formulario = $("#formAsignacion");
	var btnGuardar = $("#guardar");
	var btnReset = $( "#reset" );
	function agregarElemento(id, texto){
		destinoDrop.find( ".placeholder" ).remove();
		$( "<li style='display:none' id='l" + id + "'>" + texto + " <a href=# id='borrarBoton" + id + "'>borrar</a></li>" ).appendTo(destinoDropText);
		destinoDrop.find(':last-child').fadeIn('slow');
		$("#borrarBoton"+id).click(function(){
				var id = $(this).parent().attr('id').substr(1);
				destinoSelect.children().each(function(){
					if($(this).val()==id)$(this).remove();
				});
				
				destinoDrop.find('#l'+id).fadeOut('slow',function (){
					destinoDrop.find('#l'+id).remove();
					if(destinoSelect.children().size()==0) $("<li style='display:none' class='placeholder'>Inserte aqui los recursos</li>").appendTo(destinoDropText);
					destinoDrop.find(':last-child').fadeIn('slow');
					});
				
				return false;
			});

	}

	destinoSelect.find("option").each(function(){
		agregarElemento($(this).val(),$(this).text());
		$(this).text($(this).val());
	});

	$( "#usuarios tr td:first-child" ).draggable({
		appendTo: "body",
		helper: "clone"
	});

	destinoDrop.droppable({
		drop: function( event, ui ) {
			var id = ui.draggable.attr('id').substr(1);
			if(yaExiste(id)==false){
				agregarElemento(id, ui.draggable.text());
				$("<option value='" + id + "'>" + id + "</option>").appendTo(destinoSelectText);
			}
		}
	});	
	function yaExiste(id){
		var resultado = false;
		destinoSelect.children().each(function(){
				if($(this).val()==id) resultado = true;
				return 0;
			});
		return resultado;
	}

	btnReset.click(function(){
		$("#resultado option").remove();
		$("#recursosAsignados li").remove();
		$("<li class='placeholder'>Inserte aqui los recursos</li>").appendTo("#recursosAsignados ol");
	});
	btnGuardar.click(function(){
		destinoSelect.find("option").attr('selected', 'true');
		formulario.submit();
	});

	
	$("#tablaUsuarios").dataTable();
});
	
</script>


		<div id="usuarios">
 		<table cellpadding="0" cellspacing="0" border="0" class="display" id="tablaUsuarios">
			<thead>
		    	<tr>
			        <th>Nombre Completo</th>
			        <th>Nombre</th>
		    	</tr>
    		</thead>
    		<tbody>
    		<s:iterator value="usuarios" var="u" status="status">
    			<tr class="<s:if test="#status.even">gradeA</s:if><s:else>gradeB</s:else>">
		            <td class="nowrap" id="u${u.idUsuario}"><s:property value="#u.nombreCompleto"/></td>
		            <td class="nowrap"><s:property value="#u.nombre"/></td>
				</tr>
    		</s:iterator>
			</tbody>
		</table>
 		
		</div>

		<div id="recursosAsignados">
 			<h4>Recursos Asignados</h4>
			<div>
				<ol>
					<li class="placeholder">Inserte aqui los recursos</li>
				</ol>
			</div>
		</div>
		<form method="post" action="proyectoAsignarRecursos" id="formAsignacion">
			<s:hidden name="proyecto.idProyecto"></s:hidden>
 			<s:select list="proyecto.recursosAsignados" listKey="idUsuario" listValue="nombre" id="resultado" name="listadoIdUsuarios" multiple="true" ></s:select> 
			<input type="button" value="Guardar" id="guardar"/><br /> 
			<input type="button" value="Reset" id="reset"/> 
		</form>
		<!-- style="display:none" -->